@keyframes rotation {
  from {
    left: 115rpx;
    transform: rotate(0deg);
    top: 115rpx;
    transform: rotate(0deg);
  }

  to {
    left: 115rpx;
    transform: rotate(360deg);
    top: 115rpx;
    transform: rotate(360deg);
  }
}

.play-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.5;
  filter: blur(40rpx);
  background-color: #d1d1d1;
  z-index: -1;
}

.play-info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .play-disc {
    width: 592rpx;
    height: 592rpx;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 170rpx);

    // 指针
    .play-needle {
      width: 192rpx;
      height: 270rpx;
      position: absolute;
      top: -170rpx;
      left: 266rpx;
      transform: rotate(-20deg);
      transform-origin: 24rpx 10rpx;
    }

    .play-img {
      width: 368rpx;
      height: 368rpx;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      
    }
    
  }
  .silder {
    position: absolute;
    bottom: 400rpx;
    width: 85%;
    padding: 0 70rpx;
    align-items: center;
    display: flex;
    text{
      flex: 1;
    }
    slider{
      flex: 10;
    }
  }
  .play-control {
    position: absolute;
    bottom: 235rpx;
    color: #fff;
    width: 60%;
    display: flex;
    justify-content: space-between;
    padding: 0rpx 145rpx;

    .iconfont {
      font-size: 80rpx;
      .icon-bofang1,
      .icon-zanting1 {
        font-size: 150rpx;
      }
    }
  }
}



.play {
  animation: rotation 10s linear infinite;
  animation-play-state: running;
}

.paused {
  animation-play-state: paused;
}


.play-true {
  transform: rotate(6deg) !important;
  transition: all 1s linear;
}

.play-false {
  transform: rotate(-20deg) !important;
  transition: all 1s linear;
}